<template>
</template>

<script>
</script>

<template>
  <div>
    <div style="width: 1080px;margin-left: auto;margin-right: auto;text-align: center;margin-top: 10px;">
      <el-input v-model="permissionquery.pname" placeholder="菜单名" style="width: 200px;float: left;"></el-input>
      <el-input v-model="permissionquery.starttime" type="date" placeholder="最早登录时间" style="width: 165px;float: left;margin-left: 15px;"></el-input>
      <el-input v-model="permissionquery.endtime" type="date" placeholder="最晚登录时间" style="width: 165px;float: left;margin-left: 10px;"></el-input>
      <el-button @click="chongzhi" type="infor" style="float: left;margin-left: 10px;">重置</el-button>
      <el-button @click="chaxun" type="primary" style="float: left;">查询</el-button>
      <el-button type="warning" style="float: right;">导出</el-button>
      <el-button @click="xinzeng" type="success" style="float: right;">新增菜单</el-button>
    </div>

    <el-table
      :data="menus"
      style="width: 1080px;margin-left: auto;margin-right: auto;text-align: center;">
      <el-table-column
        label="菜单名"
        align="center"
        width="140px">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>菜单名: {{ scope.row.name }}</p>
            <p>用户的主菜单: {{ scope.row.path }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="主目录"
        align="center"
        width="100px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.path }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="菜单简介"
        width="400px">
        <template slot-scope="scope">
            <div v-if="scope.row.des!=null" slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.des }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="产生日期"
        width="140px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="更新日期"
        width="140px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
      align="center"
      width="160px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deletemenulogic(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block" style="width: 1150px;margin-left: auto;margin-right: auto;">
        <el-pagination
        style="text-align: center;"
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 10, 15, 30]"
          :page-size="permissionquery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="menustotal">
        </el-pagination>
      </div>
      <!-- 菜单新增  弹窗 -->
      <el-dialog
        :title="this.editflag==0?'新增菜单':'更新菜单'"
        :visible.sync="dialogVisiblexinzengcaidan"
        width="30%"
        :before-close="handleClose">
        <el-input v-model="permissionadd.name"  type="text" placeholder="请输入菜单名:(示例:xxxx)" clearable="true"></el-input>
        <el-input v-model="permissionadd.path"  type="text" placeholder="请输入主目录:(示例:/info)" clearable="true" style="margin-top: 10px;"></el-input>
        <el-input
        style="margin-top: 10px;"
          type="textarea"
          autosize
          clearable="true"
          placeholder="请输入菜单的简介(可选)"
          v-model="permissionadd.des">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button v-if="this.editflag==0" type="primary" @click="addnmenux">提 交</el-button>
          <el-button v-if="this.editflag==1" type="warning" @click="updatemenubyid">更 新</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
  import usermethod from '@/api/user/user'
  export default {
    data() {
      return {
        menus:[],

        permissionquery:{
              current: 1,
              endtime: null,
              limit: 6,
              pname: null,
              starttime: null
        },
        menustotal: 0,
        //新增菜单
        dialogVisiblexinzengcaidan: false,
        permissionadd:{
              id: null,
              des: null,
              name: null,
              path: null
          },
          editflag: null,//0 新增  1 编辑


      }
    },
    created(){
      this.getmenus()
    },
    methods: {
      handleEdit(row) {
        this.editflag=1
        this.dialogVisiblexinzengcaidan=true
        this.permissionadd.id=row.id
        this.permissionadd.name=row.name
        this.permissionadd.path=row.path
        this.permissionadd.des=row.des
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      //获取菜单数据
      getmenus(){
        usermethod.getpermissions(this.permissionquery).then(response => {
          this.menus=response.data.permissions
        })
        if(this.permissionquery.pname!='' || this.permissionquery.starttime!=null || this.permissionquery.endtime!=null){
          usermethod.getmenusxc(this.permissionquery).then(response => {
            this.menustotal=response.data.a
          })
        }else{
          //不带条件获取菜单个数
          usermethod.getmenusx().then(response => {
            this.menustotal=response.data.a
          })
        }
      },
      //查询表单重置
      chongzhi(){
        this.permissionquery.pname=''
        this.permissionquery.starttime=null
        this.permissionquery.endtime=null
      },
      //查询
      chaxun(){
        this.getmenus()
      },
      //确认新增菜单
      addnmenux(){
        //0 新增 1 编辑
        if(this.permissionadd.path!=null && this.permissionadd.name!=null){
          usermethod.addnmenu(this.permissionadd).then(response => {
            if(response.data.a==true){
              this.$message.success('新增菜单成功')
              this.getmenus()
              this.permissionadd.des=null
              this.permissionadd.name=null
              this.permissionadd.path=null
              this.dialogVisiblexinzengcaidan=false
            }else{
              this.$message.error(response.data.a)
            }
          })
        }else{
          this.$message.error("菜单名或主目录不能为空")
        }

      },
      updatemenubyid(){
        if(this.permissionadd.path!=null && this.permissionadd.name!=null){
          usermethod.updatenmenu(this.permissionadd).then(response => {
            if(response.data.a==true){
              this.$message.success('更新菜单成功')
              this.getmenus()
              this.permissionadd.id=null
              this.permissionadd.des=null
              this.permissionadd.name=null
              this.permissionadd.path=null
              this.dialogVisiblexinzengcaidan=false
            }else{
              this.$message.error(response.data.a)
            }
          })
        }else{
          this.$message.error("菜单名或主目录不能为空")
        }
        console.log('测试更新菜单时带的参数:',this.permissionadd)
      },
      //dilog弹出框 消除
      handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  this.editflag=0
                  this.dialogVisiblexinzengcaidan=false
                  this.permissionadd.des=null
                  this.permissionadd.name=null
                  this.permissionadd.path=null
                  this.permissionadd.id=null
                  done();
                })
                .catch(_ => {});
            },
    quxiao(){
      this.editflag=null
      this.dialogVisiblexinzengcaidan=false
      this.permissionadd.des=null
      this.permissionadd.name=null
      this.permissionadd.path=null
      this.permissionadd.id=null
    },
    xinzeng(){
      this.editflag=0
      this.dialogVisiblexinzengcaidan=true
    },
    //删除菜单（逻辑）
    deletemenulogic(id){
      usermethod.logicdeletepermission(id).then(response => {
        if(response.data.a==true){
          this.$message.success('删除菜单成功')
          this.getmenus()
        }else{
          this.$message.error('删除菜单失败!')
        }
      })
    },
    //分页
    handleCurrentChange(val){
      this.permissionquery.current=val 
      this.getmenus()
    },
    handleSizeChange(val){
      this.permissionquery.current=1
      this.permissionquery.limit=val
      this.getmenus()
    }
    }
  }
</script>
